<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
	<Echart id="rightTop" :options="option" class="right_top_inner" v-if="pageflag" ref="charts" />
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from "api/modules";
	import {
		graphic
	} from "echarts"
	export default {
		data() {
			return {
				option: {},
				pageflag: false,
			};
		},
		created() {

		},

		mounted() {
			this.getData();
		},
		beforeDestroy() {
			this.clearData();
		},
		methods: {
			clearData() {},
			getData() {
				currentGET("impCountry").then((res) => {
					if (res.flag) {
						this.pageflag = true;
						this.init(res.data.total, res.data.impCountryData);
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			init(total, impCountryData) {
				this.option = {
					title: {
						text: "进口总量",
						//标题位置
						left: "center",
						top: "55%",
						//标题样式
						textStyle: {
							fontSize: 16,
							color: "#7EB7FD",
						}
					},
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
					},
					legend: {
						orient: 'vertical',
						right: 15,
						top: 5,
						itemWidth: 12,
						itemHeight: 12,
						textStyle: {
							color: '#fff'
						}
					},
					series: [{
						name: '进口国家',
						type: 'pie',
						radius: ['60%', '90%'],
						avoidLabelOverlap: false,
						label: {
							show: true,
							position: 'center',
							textStyle: {
								color: '#fff',
								fontSize: 22
							},
							formatter: function() {
								return `${total}万吨`
							}
						},
						labelLine: {
							show: false
						},
						data: impCountryData
					}]
				};
			},
		},
	};
</script>
<style lang='scss' scoped>
	.right_top_inner {
		margin-top: -8px;
	}
</style>